<template>
  <div
    class="PictureComparison"
    :style="'width:' + width + 'px;height:' + height + 'px'"
  >
    <div class="before-image" :style="'width:' + x + 'px'" @click.stop="goLeft">
      <div :style="'width:' + width + 'px;height:' + height + 'px'">
        <slot name="left"></slot>
      </div>
    </div>
    <div class="after-image" @click.stop="goRight">
      <div :style="'width:' + width + 'px;height:' + height + 'px'">
        <slot name="right"></slot>
      </div>
    </div>
    <div
      class="divider-bar"
      :style="'left:' + x + 'px'"
      @mousedown.prevent="onmouseDown($event)"
    ></div>
<!--    <div style="position: absolute; overflow: hidden; width: 30px; height: 30px; margin-left: -5px; margin-top: -5px;" @mousedown.prevent="onmouseDown($event)"></div>-->
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  props: {
    width: { type: String, default: "500" },
    height: { type: String, default: "600" },
  },
  setup(props) {
    const data = reactive({
      isDown: false, //鼠标是否正按住
      moveX: 10, //鼠标移动的位置
      x: props.width / 2, //设置位置
    });
    const onmouseDown = (event) => {
      data.isDown = true;
      data.x = event.target.offsetLeft;
      var disX = event.clientX - event.target.offsetLeft;

      document.onmousemove = function (event) {
        if (data.isDown == false) {
          return;
        }
        data.x = event.clientX - disX;
        if (data.x >= props.width) {
          data.x = props.width;
        } else if (data.x <= 0) {
          data.x = 0;
        }
      };

      document.onmouseup = function () {
        data.isDown = false;
        document.onmousemove = document.onmouseup = null;
        return false;
      };
    };


    const goLeft = () => {
      data.x = 0;
    };
    const goRight = () => {
      data.x = props.width;
    };
    return {
      ...toRefs(data),
      onmouseDown,
      goLeft,
      goRight,
    };
  },
};
</script>

<style lang="scss" scoped>
.PictureComparison {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  min-height: 273px;
  margin-bottom: 40px;
  overflow: hidden;

  .before-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 50%;
    overflow: hidden;
  }

  .after-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .bal-handle {
    height: 41px;
    width: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -21px;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 10px rgb(12, 12, 12);
  }
  //.bal-handle::before {
  //  bottom: 50%;
  //  margin-bottom: 20px;
  //  box-shadow: 0 0 10px rgb(12, 12, 12);
  //}
  //.bal-handle::after {
  //  top: 50%;
  //  margin-top: 20.5px;
  //  box-shadow: 0 0 5px rgb(12, 12, 12);
  //}
  //.bal-handle::before,
  //.bal-handle::after {
  //  content: " ";
  //  display: block;
  //  width: 2px;
  //  background: #fff;
  //  height: 9999px;
  //  position: absolute;
  //  left: 50%;
  //  margin-left: -1.5px;
  //}
  .divider-bar {
    cursor: move;
    position: absolute;
    width: 1px;
    left: 40%;
    bottom: 0;
    background: #eff1ee;
    height: 100%;

    display: block;
    z-index: 2;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
    &::after {
      content: "<->";
      position: absolute;
      color: #000;
      font-weight: bold;
      text-align: center;
      line-height: 32px;
      width: 30px;
      height: 30px;
      background: #fff;
      border-radius: 15px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
